<template>
  <div class="modules-aliyunoss">
    <a-modal
      :width="640"
      :visible="visible"
      :confirmLoading="loading"
      @ok="() => { $emit('ok') }"
      @cancel="() => { $emit('cancel') }"
      ok-text="保存"
      cancel-text="取消"
    >
      <a-spin :spinning="loading">
        <a-form :form="form" v-bind="formLayout">
          <a-form-item>
            <a-input v-decorator="['pid', { initialValue: pid }]" type="hidden" />
          </a-form-item>
          <a-form-item
            label="Access Key Id"
          >
            <a-input placeholder="" v-decorator="['AccessKeyId', {rules:[{required: true, message: 'AccessKeyId'}]}]" />
          </a-form-item>  
          <a-form-item
            label="Access Key Secret"
          >
            <a-input placeholder="" v-decorator="['AccessKeySecret', {rules:[{required: true, message: 'AccessKeySecret'}]}]" />
          </a-form-item>
          <a-form-item
            label="Bucket"
          >
            <a-input v-decorator="['bucket', { initialValue: '', rules:[{required: true, message: '请填写Bucket'}]}]" />
          </a-form-item>
          <a-form-item
            label="存储区域"
          >
            <a-select v-decorator="['region', {initialValue: 'oss-cn-hangzhou', rules:[{required: true}]}]">
              <a-select-option value="oss-cn-hangzhou">华东1（杭州）</a-select-option>
              <a-select-option value="oss-cn-shanghai">华东2（上海）</a-select-option>
              <a-select-option value="oss-cn-qingdao">华北1（青岛）</a-select-option>
              <a-select-option value="oss-cn-beijing">华北2（北京）</a-select-option>
              <a-select-option value="oss-cn-zhangjiakou">华北3（张家口）</a-select-option>
              <a-select-option value="oss-cn-huhehaote">华北5（呼和浩特）</a-select-option>
              <a-select-option value="oss-cn-wulanchabu">华北6（乌兰察布）</a-select-option>
              <a-select-option value="oss-cn-shenzhen">华南1（深圳）</a-select-option>
              <a-select-option value="oss-cn-heyuan">华南2（河源）</a-select-option>
              <a-select-option value="oss-cn-guangzhou">华南3（广州）</a-select-option>
              <a-select-option value="oss-cn-chengdu">西南1（成都）</a-select-option>
              <a-select-option value="oss-cn-hongkong">中国（香港）</a-select-option>
              <a-select-option value="oss-us-west-1">美国西部1（硅谷）</a-select-option>
              <a-select-option value="oss-us-east-1">美国东部1（弗吉尼亚）</a-select-option>
              <a-select-option value="oss-ap-southeast-1">亚太东南1（新加坡）</a-select-option>
              <a-select-option value="oss-ap-southeast-2">亚太东南2（悉尼）</a-select-option>
              <a-select-option value="oss-ap-southeast-3">亚太东南3（吉隆坡）</a-select-option>
              <a-select-option value="oss-ap-southeast-5">亚太东南5（雅加达）</a-select-option>
              <a-select-option value="oss-ap-northeast-1">亚太东北1（日本）</a-select-option>
              <a-select-option value="oss-ap-south-1">亚太南部1（孟买）</a-select-option>  
              <a-select-option value="oss-eu-central-1">欧洲中部1（法兰克福）</a-select-option>
              <a-select-option value="oss-eu-west-1">英国（伦敦）</a-select-option>
              <a-select-option value="oss-me-east-1">中东东部1（迪拜）</a-select-option>        
            </a-select>
          </a-form-item>   
          <a-form-item
            label="协议"
          >
            <a-select v-decorator="['protocol', {initialValue: 'http:', rules:[{required: true}]}]">
              <a-select-option value="http:">http</a-select-option>
              <a-select-option value="https:">https</a-select-option>            
            </a-select>
          </a-form-item>                 
          <a-form-item
            label="CDN域名"
          >
            <a-input placeholder="如：www.baidu.com" v-decorator="['domain', {initialValue: '', rules:[{required: false, message: '请填写域名'}]}]" />
          </a-form-item>
          <a-form-item
            label="自定义路径"
          >
            <a-input v-decorator="['path', {initialValue: 'images', rules:[{required: false}]}]" />
          </a-form-item>                              
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import pick from 'lodash.pick'
import COMMON from '@/store/common'

// 表单字段
const fields = ['pid', 'AccessKeyId', 'AccessKeySecret', 'bucket', 'region', 'domain', 'protocol', 'path']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      pid: COMMON.aliyunoss,
      form: this.$form.createForm(this)
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  },
  methods: {
    validatorDomain () {
      //
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/ .ant-form-item {
    margin-bottom: 0px;
  }
</style> 